<script  lang="ts" setup>
import { Api } from "@/apis";
import { SerializeBookDetailDataType } from "@/typing";
import { useRoute, useRouter } from 'vue-router'
import { ref, watch } from "vue";

const route = useRoute()
const router = useRouter()

let serialId = ref<string>();
let bookTitle = ref<string>('');
serialId.value = String(route.query.id);

let BooksList = ref<Array<SerializeBookDetailDataType>>([]);

watch(() => route.query, (newValue) => {
    serialId.value = String(newValue.id);
    render(serialId.value);
})

render(serialId.value);

async function render(id: string) {
    const data = await Api.getSerialBooksList(id);
    BooksList.value = data.data.data;

    BooksList.value.forEach((item, index) => {
        if (index == BooksList.value.length - 1) {
            bookTitle.value = item.title
        }
    })
}

function goToBack() {
    router.push({ name: 'home' });
}

</script>

<template>
    <div class="h-screen  bg-gray-50">
        <div class="p-5 flex items-center bg-white">
            <img class="w-6 h-10" src="@/assets/card/h5_qr_back.png" alt="back" @click="goToBack">
            <div class=" text-2xl ml-5">{{ bookTitle || '' }}</div>
        </div>
        <div class="p-8 pb-32">
            <div v-for="(l, i) in BooksList" :key="i" class="flex mb-5">
                <img class="w-24 rounded-2xl mr-5" :src="l.cover" alt="img">
                <div class="w-4/5">
                    <div class="my-2 text-2xl">{{ l.title }}</div>
                    <div class="book-title text-gray-400 ">{{ l.subtitle }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<style>
.book-title {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
</style>